<!--  -->
<template>
  <div class='padding20'>
    <h1>个人信息</h1>
    <div>{{personForm.username}}</div>
    <el-button type="primary" style="float:right" @click='save'>保存</el-button>
    <div style="display:flex">
      <!-- <div v-if="imgSrc">
        <img v-if='!isSvg' :src="imgSrc" alt="" style="height:200px; width:200px" type='text/xml'>
        <embed v-if='isSvg' :src="imgSrc" alt="" style="height:200px; width:200px" type='text/xml'>
      </div> -->
      <!-- <el-image v-if="imgSrc" :src="imgSrc" class="" style="height:200px; width:200px"></el-image> -->
      <el-upload class="avatar-uploader" ref="upload" action="#" :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
        <!-- personPage -->
        <el-image v-if="personForm.headPath" :src="host + personForm.headPath" class="" style="height:200px; width:200px">
            <!-- <div slot="error" class="image-slot noImage">暂无图片{{host + personForm.headPath}}</div> -->
        </el-image>
        <div v-else>
          <i class="el-icon-plus avatar-uploader-icon"></i>
          <div style="position: absolute;top: 110px;left: 54px;color:#8c939d">{{imgSrc?'修改证件照':'证件照上传'}}</div>
        </div>
      </el-upload>
    </div>
    <el-form :model="personForm" label-width="140px">
      <el-form-item label="毕业院校">
        <el-input v-model="personForm.school" placeholder="毕业院校"></el-input>
      </el-form-item>
      <el-form-item label="毕业时间">
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" v-model=" personForm.graduationDate" type="datetime" placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="评级职称">
        <el-input v-model="personForm.ratingTitle" placeholder="评级职称"></el-input>
      </el-form-item>
      <el-form-item label="所学专业">
        <el-input v-model="personForm.majorCourse" placeholder="所学专业"></el-input>
      </el-form-item>
      <el-form-item label="经历">
        <el-input v-model="personForm.experience" placeholder="经历" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="获奖情况">
        <el-input v-model="personForm.awardGetList" placeholder="获奖情况" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="所讲课程">
        <el-input v-model="personForm.teachCourse" placeholder="所讲课程" type="textarea"></el-input>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import teacherApi from "../api/teacher.service.js";
import operateApi from "../api/operate.service.js";
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      personForm: {
        school: "",
        graduationDate: "",
        ratingTitle: "",
        ratingTitle: "",
        majorCourse: "",
        experience: "",
        //   ratingTitle:'',
        personPage: "",
        username: sessionStorage.getItem("username"),
        awardGetList: "",
        teachCourse: "",
        headName: "",
        headPath: "",
      },
      fileList: [],
      imgSrc: "",
      isSvg: "",
      host: window.location.href.split("/#/")[0] + "/api",
    };
  },
  mounted() {
    this.getPersonInfo();
  },
  computed: {},
  watch: {},
  methods: {
    // 有关上传内容
    handleChange(file, fileList) {
      if (this.$funUtil.checkImg(file)) {
        this.fileList = fileList.slice(-1);
        this.uploadFile(file);
      }
    },
    async uploadFile(file) {
      let formData = new FormData();
      formData.append("file", file.raw);
      let { data } = await teacherApi.fileUpload(formData);
      this.personForm.personPage = data.data.fileName;
      this.personForm.headName = data.data.fileName;
      this.personForm.headPath = data.data.url;
      this.imgSrc = URL.createObjectURL(file.raw);
    },
    handleRemove(file, fileList) {
      this.fileList = fileList.slice(-1);
      if (this.personForm.personPage) {
        teacherApi.deleteFile(this.personForm.personPage).then(data => {
          if (data.code == 10200) {
            this.$message({
              type: "success",
              message: "删除附件成功",
            });
            this.personForm.personPage = "";
            this.imgSrc = ''
          }
        });
      }
    },
    async getPersonInfo() {
      let { data } = await teacherApi.getPersonInfo();
      if (data) {
        this.personForm = data;
        // this.isSvg = data.headName && data.headName.split(".")[1] == "svg";
        /* this.imgSrc = await operateApi.viewUrl(
          data.headName,
          // this.isSvg ? "text/xml" : ""
        ); */
      }
    },
    async save() {
      let data = null;
      if (this.personForm.id) {
        data = await teacherApi.updatePersonInfo(this.personForm);
      } else {
        data = await teacherApi.addPersonInfo(this.personForm);
      }
      if (data.data == true) {
        this.$message.success("保存成功");
        this.getPersonInfo();
      }
    },
  },
  created() {},
};
</script>
<style >
</style>